<template>
  <div class="tiktok-error" :class="{ 'fullscreen': fullscreen }">
    <div class="error-content">
      <!-- 错误图标动画 -->
      <div class="error-icon">
        <div class="broken-heart">
          <div class="heart-piece left"></div>
          <div class="heart-piece right"></div>
        </div>
        <div class="wifi-icon">
          <div class="wifi-line line1"></div>
          <div class="wifi-line line2"></div>
          <div class="wifi-line line3"></div>
          <div class="wifi-dot"></div>
        </div>
      </div>

      <!-- 错误信息 -->
      <div class="error-text">
        <h3 class="error-title">{{ title }}</h3>
        <p class="error-desc">{{ description }}</p>
      </div>

      <!-- 操作按钮 -->
      <div class="error-actions">
        <button class="retry-btn" @click="handleRetry" :disabled="retrying">
          <span class="btn-text">{{ retrying ? '重试中...' : '重新加载' }}</span>
          <div class="btn-shine"></div>
        </button>
        <button class="back-btn" @click="handleBack" v-if="showBack">
          返回首页
        </button>
      </div>

      <!-- 错误代码（可选） -->
      <div class="error-code" v-if="errorCode">
        错误代码: {{ errorCode }}
      </div>
    </div>

    <!-- 背景粒子效果：给每个粒子加 CSS 变量 --particle-opacity -->
    <div class="error-particles">
      <div class="particle" v-for="particle in particles" :key="particle.id"
        :style="[particle.style, { '--particle-opacity': particle.opacity || 0.3 }]"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue'

// 定义组件属性
const props = defineProps({
  fullscreen: { type: Boolean, default: true },
  title: { type: String, default: '网络连接失败' },
  description: { type: String, default: '请检查网络连接后重试' },
  errorCode: { type: String, default: '' },
  showBack: { type: Boolean, default: true }
})

// 定义事件
const emit = defineEmits(['retry', 'back'])

// 响应式数据
const retrying = ref(false)
const particles = reactive([])

// 生成随机粒子（逻辑不变，仅样式绑定改了）
const generateParticles = () => {
  particles.length = 0
  const count = 15

  for (let i = 0; i < count; i++) {
    const opacity = Math.random() * 0.5 + 0.1; // 随机透明度
    particles.push({
      id: i,
      style: {
        left: `${Math.random() * 100}%`,
        top: `${Math.random() * 100}%`,
        width: `${Math.random() * 6 + 2}px`,
        height: `${Math.random() * 6 + 2}px`,
        animationDelay: `${Math.random() * 3}s`
      },
      opacity: opacity // 保存透明度，用于 CSS 变量
    })
  }
}

// 处理重试（逻辑不变）
const handleRetry = async () => {
  if (retrying.value) return
  retrying.value = true
  try {
    await emit('retry') // 触发父组件的重试逻辑
  } finally {
    setTimeout(() => { retrying.value = false }, 2000)
  }
}

// 处理返回（逻辑不变）
const handleBack = () => {
  emit('back') // 触发父组件的返回逻辑
}

// 组件挂载/卸载（逻辑不变）
onMounted(() => { generateParticles() })
onUnmounted(() => { particles.length = 0 })
</script>

<style scoped lang="scss">
.tiktok-error {
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;

  &.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
  }

  /* 其他样式（error-content、error-icon、error-text 等）不变，省略... */

  .error-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;

    .particle {
      position: absolute;
      background: linear-gradient(135deg, #ff0050, #ff2d70);
      border-radius: 50%;
      /* 引用 CSS 变量，动画中使用 */
      animation: float 6s infinite linear;
    }
  }

  /* 修复关键：@keyframes 中引用 CSS 变量 --particle-opacity */
  @keyframes float {
    0% {
      transform: translateY(0) rotate(0deg);
      opacity: var(--particle-opacity); // 用 var() 读取 CSS 变量
    }

    100% {
      transform: translateY(-100px) rotate(360deg);
      opacity: 0;
    }
  }

  /* 其他动画（breakLeft、wifiPulse 等）不变，省略... */
}

/* 响应式样式不变，省略... */
</style>